import React from 'react';
import { ListView, List } from 'antd-mobile';

const Item = List.Item;
class MyListView extends React.Component {

  constructor(props) {
    super(props);
    const dataSource = new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 !== row2,
    });

    this.state = {
      dataSource: dataSource.cloneWithRows(props.data || []),
      refreshing: false,
      isLoading: false,
      hasMore: true,
    };
  }

  onEndReached = (event) => {
    if (this.state.isLoading) {
      return;
    }
    if (!this.state.hasMore) {
      return;
    }
    console.log('reach end', event);
  };

  render() {
    return (
      <ListView
        dataSource={this.state.dataSource}
        renderFooter={() => <div style={{ padding: 30, textAlign: 'center' }}>
          {this.state.isLoading ? '加载中...' : '加载完毕'}
        </div>}
        pageSize={20}
        initialListSize={20}
        scrollRenderAheadDistance={500}
        scrollEventThrottle={20}
        onEndReached={this.onEndReached}
        onEndReachedThreshold={50}
        {...this.props}
      />
    );
  }
}

export default MyListView;
